<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <title>Blog</title>
  </head>
  <body>
    <div class="wrapper">
      <header class="purple">
        <nav class="navbar wrapper_content">
          <div class="navbar_title">
            <div class="navbar_logo">
              <i class="fas fa-book-open"></i>
            </div>

            <div class="navbar_brand">
              <a class="navbar_brand_link" href="index.html">Blog</a>
            </div>
          </div>

          <div class="navbar_menu">
            <div class="navbar_link">
              <a href="index.html">Home</a>
            </div>
            <div class="navbar_link">
              <a href="show_categories.html">Category1</a>
            </div>
            <div class="navbar_link">
              <a href="show_tags.html">Category2</a>
            </div>
            <div class="navbar_link">
              <a href="show_posts.html">Category3</a>
            </div>
            <form class="navbar_form_search">
              <input
                class="form_search_input"
                type="text"
                placeholder="Search"
              />
              <button class="btn btn_search" type="submit">Search</button>
            </form>
            <div class="navbar_enter">
              <div class="navbar_login">
                LogIn/RegIn <i class="fas fa-sign-in-alt"></i>
              </div>
              <div class="navbar_logout">
                LogOut <i class="fas fa-door-open"></i>
              </div>
            </div>
          </div>
          <div class="navbar_burger">
            <i class="fas fa-bars"></i>
          </div>
        </nav>
      </header>
      <main>
        <div class="article_content wrapper_content">
          <!-- Article page -->

          <div class="article">
            <div class="article_title">
              <h1>Lorem ipsum dolor sit.</h1>
            </div>
            <div class="article_description">
              "Lorem ipsum dolor, sit amet consectetur adipisicing elit, sit
              amet consectetur adipisicing elit."
            </div>
            <div class="article_image">
              <img src="src/image/food02.jpg" alt="" />
            </div>
            <div class="article_text">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Assumenda, illo? Sint ullam ipsum vitae, iste cupiditate aliquid
                ab optio recusandae corrupti distinctio similique quo ducimus
                eius consequuntur veniam odio ea tempore fuga laboriosam! Quidem
                velit consequuntur tempora natus deleniti repellat vitae
                distinctio architecto eveniet doloribus magni, inventore iusto
                porro harum! Lorem ipsum dolor sit amet consectetur adipisicing
                elit. Assumenda, illo? Sint ullam ipsum vitae, iste cupiditate
                aliquid ab optio recusandae corrupti distinctio similique quo
                ducimus eius consequuntur veniam odio ea tempore fuga
                laboriosam! Quidem velit consequuntur tempora natus deleniti
                repellat vitae distinctio architecto eveniet doloribus magni,
                inventore iusto porro harum! Lorem ipsum dolor sit amet
                consectetur adipisicing elit. Assumenda, illo? Sint ullam ipsum
                vitae, iste cupiditate aliquid ab optio recusandae corrupti
                distinctio similique quo ducimus eius consequuntur veniam odio
                ea tempore fuga laboriosam! Quidem velit consequuntur tempora
                natus deleniti repellat vitae distinctio architecto eveniet
                doloribus magni, inventore iusto porro harum! Lorem ipsum dolor
                sit amet consectetur adipisicing elit.
              </p>
              <p>
                Assumenda, illo? Sint ullam ipsum vitae, iste cupiditate aliquid
                ab optio recusandae corrupti distinctio similique quo ducimus
                eius consequuntur veniam odio ea tempore fuga laboriosam! Quidem
                velit consequuntur tempora natus deleniti repellat vitae
                distinctio architecto eveniet doloribus magni, inventore iusto
                porro harum! Lorem ipsum dolor sit amet consectetur adipisicing
                elit. Assumenda, illo? Sint ullam ipsum vitae, iste cupiditate
                aliquid ab optio recusandae corrupti distinctio similique quo
                ducimus eius consequuntur veniam odio ea tempore fuga
                laboriosam! Quidem velit consequuntur tempora natus deleniti
                repellat vitae distinctio architecto eveniet doloribus magni,
                inventore iusto porro harum! Lorem ipsum dolor sit amet
                consectetur adipisicing elit. Assumenda, illo? Sint ullam ipsum
                vitae, iste cupiditate aliquid ab optio recusandae corrupti
                distinctio similique quo ducimus eius consequuntur veniam odio
                ea tempore fuga laboriosam! Quidem velit consequuntur tempora
                natus deleniti repellat vitae distinctio architecto eveniet
                doloribus magni, inventore iusto porro harum!
              </p>
            </div>

            <!-- Tags section -->
            <div class="article_tags">
              <div class="article_tag">
                <a href="">Tag 1</a>
              </div>
              <div class="article_tag">
                <a href="">Tag 2</a>
              </div>
              <div class="article_tag">
                <a href="">Tag 3</a>
              </div>
            </div>
            <!-- End tags section -->

            <!-- State section -->
            <div class="article_state">
              <div class="article_itame">
                <a href="">
                  <i class="fas fa-thumbs-up"></i>
                </a>
                <span>: 20</span>
              </div>
              <div class="article_itame">
                <a href="">
                  <i class="fas fa-share-alt"></i>
                </a>
                <span>: 12</span>
              </div>
              <div class="article_itame">
                <a href="">
                  <i class="fas fa-comments"></i>
                </a>
                <span>: 33</span>
              </div>
            </div>
            <!-- End state section -->

            <div class="article_comment_title">
              <h2>Comments:</h2>
              <span>(33)</span>
            </div>

            <!-- Comments section -->
            <div class="article_comments">
              <div class="article_comment_body">
                <div class="article_user_profile">

                  <div class="user_avatar">
                    <img src="src/avatars/2.png" alt="" />
                  </div>
                  <div class="user_name">
                    User Name
                  </div>

                </div>

                <div class="article_user_comment">

                  <div class="comment_text">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                    Omnis officiis velit ipsum architecto, laborum molestias.
                  </div>
                  <div class="comment_state">
                    <div class="comment_data">
                      08 august 2023
                    </div>
                    <div class="comment_action">
                      <div class="comment_replay">
                        <i class="fas fa-reply"></i>
                      </div>
                      <div class="comment_comment">
                        <i class="far fa-comment-dots"></i>
                      </div>
                      <div class="comment_heart">
                        <i class="fas fa-heart"></i>
                        <span>5</span>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

              <div class="article_comment_body">
                <div class="article_user_profile">

                  <div class="user_avatar">
                    <img src="src/avatars/4.png" alt="" />
                  </div>
                  <div class="user_name">
                    User Name
                  </div>

                </div>

                <div class="article_user_comment">

                  <div class="comment_text">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                    Omnis officiis velit ipsum architecto, laborum molestias.
                  </div>
                  <div class="comment_state">
                    <div class="comment_data">
                      08 august 2023
                    </div>
                    <div class="comment_action">
                      <div class="comment_replay">
                        <i class="fas fa-reply"></i>
                      </div>
                      <div class="comment_comment">
                        <i class="far fa-comment-dots"></i>
                      </div>
                      <div class="comment_heart">
                        <i class="fas fa-heart"></i>
                        <span>5</span>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

              <div class="article_comment_body">
                <div class="article_user_profile">

                  <div class="user_avatar">
                    <img src="src/avatars/3.png" alt="" />
                  </div>
                  <div class="user_name">
                    User Name
                  </div>

                </div>

                <div class="article_user_comment">

                  <div class="comment_text">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                    Omnis officiis velit ipsum architecto, laborum molestias.
                  </div>
                  <div class="comment_state">
                    <div class="comment_data">
                      08 august 2023
                    </div>
                    <div class="comment_action">
                      <div class="comment_replay">
                        <i class="fas fa-reply"></i>
                      </div>
                      <div class="comment_comment">
                        <i class="far fa-comment-dots"></i>
                      </div>
                      <div class="comment_heart">
                        <i class="fas fa-heart"></i>
                        <span>5</span>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

            </div>
            <!-- End comment section -->
          </div>

          <!-- End article page -->

          <!-- Sidebar article -->

          <div class="more_articles">
            <div class="more_articles_title">More articles on the topic</div>
            <div class="more_articles_lent">
              <div class="more_article">
                <div class="more_image">
                  <img src="src/image/food07.jpg" alt="" />
                </div>
                <div class="more_title">Lorem ipsum dolor sit.</div>
                <button class="btn btn_more_articles">Reade</button>
              </div>
              <div class="more_article">
                <div class="more_image">
                  <img src="src/image/food08.jpg" alt="" />
                </div>
                <div class="more_title">Lorem ipsum dolor sit.</div>
                <button class="btn btn_more_articles">Reade</button>
              </div>
              <div class="more_article">
                <div class="more_image">
                  <img src="src/image/food09.jpg" alt="" />
                </div>
                <div class="more_title">Lorem ipsum dolor sit.</div>
                <button class="btn btn_more_articles">Reade</button>
              </div>
              <div class="more_article">
                <div class="more_image">
                  <img src="src/image/food03.jpg" alt="" />
                </div>
                <div class="more_title">Lorem ipsum dolor sit.</div>
                <button class="btn btn_more_articles">Reade</button>
              </div>
            </div>
          </div>

          <!-- End Sidebar article -->
        </div>
      </main>
      <footer class="purple">
        <div class="footer_content wrapper_content">
          Created by Soloviev NV in 2023, all rights reserved.
          <div class="footer_social_icon">
            <i class="fab fa-instagram-square"></i>
            <i class="fab fa-facebook-square"></i>
            <i class="fab fa-google-plus-square"></i>
            <i class="fab fa-twitter-square"></i>
          </div>
        </div>
      </footer>
    </div>

    <script src="js/itc-slider.js" defer></script>
  </body>
</html>
